import React, { Component } from 'react'
import { Card } from 'antd-mobile';
import ShowStyle from './showStyleComp'
import { Stepper } from 'antd-mobile'


const ItemClassify = (props) => {

  return <li onClick={() => { props.showType(props.data) }}>{props.data[0].av_zvalue}</li>

}

const ItemType = (props) => {
  return <li>
    <div onClick={() => { props.showSize(props.av_fvalue, props) }} >
      <div>
        {props.av_fvalue}
      </div>
      <div>
        {props.stock_tips}
      </div>
    </div>
  </li>
}

class ShowAction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 
      lang: null,
      type: null,
      // 
      localdata: null,
      // 
      info: null,
      url: null,
      color: null,
      norms: null,
      val: 1,
      yuanjia: null,
    };
  }

  renderItemClassify = () => {
    return this.state.lang &&
      Object.values(this.state.lang).map(item => <ItemClassify
        key={Object.values(item)[0].sku_id}
        data={Object.values(item)}
        showType={this.showType}
      />)
  }

  showSize = (data, a) => {
    this.setState({
      norms: data || this.props.foodsdata[0].sku[0].av_fvalue,
      localdata: a
    })
  }

  showType = (data) => {
    this.setState({
      type: data,
      url: data[0].av_zpic,
      price: data[0].cprice,
      color: data[0].av_zvalue,
      info: this.props.foodsdata && this.props.foodsdata[0].info.goods_title,
      yuanjia: data[0].price,
    })

  }

  rendertype = () => {
    return this.state.type &&
      this.state.type.map(item => <ItemType
        key={item.sku_id}
        {...item}
        showSize={this.showSize}
        set={this.set}
      />)
  }

  onChange = (val) => {
    this.setState({
      val: val,
    })
  }

  set = (a) => {
    console.log('hshshhshhshs', a)
  }

  addData = () => {
    if (this.state.localdata) {
      var singleData = { ...this.state.localdata }
      var obj = {}
      singleData.title = this.state.info
      singleData.num = this.state.val
      obj[this.state.localdata.sku_id] = singleData
    }
      // 隐藏卡片
      this.props && this.props.onchange()
    // 购物车存储逻辑
    var shop = JSON.parse(localStorage.getItem('shopcar'))
    if (shop) {
        if(Object.keys(shop).indexOf(singleData.sku_id) !== -1){
          shop[singleData.sku_id].num = singleData.num
          localStorage.setItem('shopcar',JSON.stringify( shop))
        }else{
          localStorage.setItem('shopcar', JSON.stringify(Object.assign(obj,shop) ))
        }
    } else {
      localStorage.setItem('shopcar', JSON.stringify(obj))
    }

  }


  render() {
    return (
      <ShowStyle>
        <Card>
          <Card.Header
            title={<span>价格:<span style={{ color: 'red' }} >{this.state.price}</span></span>}
            thumb={<img style={{ width: '1rem', height: '1rem' }} src={this.state.url} alt="" />}
            extra={<span>您已选择：<span style={{ color: 'red' }} >{this.state.color} {this.state.norms || this.props.foodsdata[0].sku[0].av_fvalue}</span></span>}
          />
          <Card.Body>
            <div className="classify">
              <p>{this.props.foodsdata && this.props.foodsdata[0].info.zav_name}</p>
              <ul>

                {/* 类型渲染 */}
                {this.renderItemClassify()}

              </ul>
            </div>
            <div>
              <p>{this.props.foodsdata && this.props.foodsdata[0].info.fav_name}</p>
              <ul className="type" >

                {/* 型号渲染  */}
                {this.rendertype()}

              </ul>
            </div>
            <div>
              <div className="step">
                <span>购买数量(最大为100)  :</span>
                <Stepper
                  style={{ width: '30%', minWidth: '2rem' }}
                  showNumber
                  max={99}
                  min={1}
                  defaultValue='1'//初始值
                  onChange={(val) => { this.onChange(val) }
                  }
                />
              </div>

            </div>

          </Card.Body>
        </Card>
        <div className="btn" onClick={this.addData} >确认</div>
      </ShowStyle>
    )
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.foodsdata[0].sku) {
      var arr = []
      var obj = {}
      var arr1 = []
    }
    nextProps.foodsdata[0].sku.map(item => {
      arr.push(item.av_zid)
      item.flag = false
      obj[item.av_zid] = {}
    })
    const arrs = [...new Set(arr)]
    nextProps.foodsdata[0].sku.map(item => {
      arrs.map((one) => {
        if (one == item.av_zid) {
          obj[one][item.av_fvalue] = item
        }
      })
    })


    this.setState({
      lang: obj,
    })

    obj &&
      Object.values(obj).map((item) => {
        arr1.push(Object.values(item))
      })


    this.showType(arr1[0])
    this.showSize(arr1[0].av_fvalue)




  }
}

export default ShowAction;



